<template>
  <MenuPage>
    <template slot="search">
      <Checkbox
        v-model="selectAllIcon"
        style="margin-top:8px; width: 66px;"
        @on-change="handleCheckIcon"
        v-if="distributed"
        title="仅选择当前页数据"
        >选择所有</Checkbox
      >
      <Button
        ghost
        style="margin-right: 15px"
        type="primary"
        icon="ios-cloud-upload-outline"
        v-if="distributed"
        @click="reportedIcons"
        >图标上报</Button
      >

      <Button type="primary" ghost class="md-add-jh" @click="addIconModal"><i class="el-icon-edit"></i>创建图标</Button>
      <Divider type="vertical" style="margin: 10px 0px 10px 10px;" />
      <div style="height: 32px;line-height: 32px;margin-left: 15px">
        <Checkbox v-model="creatByMeModal" @on-change="searchCreatedByMe" style="width: 70px;"
          >由我创建</Checkbox
        >
      </div>
      <Select filterable
        @on-change="searchItem"
        v-model="rangeId"
        style="width:155px"
        :placeholder="'靶场:' + mainRange"
        clearable
        v-if="distributedRange"
      >
        <Option
          v-for="(items, index) in rangeAllList"
          :value="items.id"
          :key="index + 'range'"
          >{{ items.name }}</Option
        >
      </Select>
      <i-select
        clearable
        v-model="selectIconType"
        placeholder="可见范围"
        style="margin-left: 15px;width: 150px"
        @on-change="selectIconTypeChange"
      >
        <i-option value="range">平台</i-option>
        <i-option value="system">系统</i-option>
        <i-option value="company">单位</i-option><i-option value="person">个人</i-option>
      </i-select>
      <i-select
        clearable
        v-model="iconType"
        placeholder="图标类型"
        style="margin-left: 15px;width: 150px"
        @on-change="IconTypeChange"
      >
        <i-option value="Covertitle">封面</i-option>
        <i-option value="3DModel">3D模型</i-option>
        <i-option value="HEAD">头像</i-option>
        <i-option value="logo">LOGO</i-option>
        <i-option value="other">其他</i-option>
      </i-select>
      <Input
        clearable
        v-model.trim="iconModelInput"
        placeholder="图标名称"
        @on-change="searchIconNameBtn"
        style="width: 180px;margin-left: 15px"
      />
      <Button
        class="header-btn"
        type="primary"
        ghost
        style="height: 32px;margin-left: 5px;"
        @click="refreshIcon()"
        ><i class="el-icon-refresh-right"
      /></Button>
    </template>
    <template slot="content">
      <div style="padding:15px 0 0 20px;" v-if="selectIcons.length > 0">
        <Tag
          type="border"
          closable
          color="primary"
          v-for="question in selectIcons"
          :key="question.id"
          @on-close="checkSingleQuestion(false, question)"
          >{{ question.name }}</Tag
        >
      </div>
      <!-- 新列表 -->
      <!-- <div v-show="iconList.length > 0">
                <div class="content-wrap">
                    <div class="project-item" v-for="(item,key) in iconList" :key="key">
                        <div class="item-first-line">
                            <div class="project-name-state">
                                <div style="margin-right:8px;width: 20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" v-if="distributed">
									<Checkbox v-model="item._checked" @on-change="checkSingleQuestion($event,item)"></Checkbox>
							    </div>
                                <Tooltip :content="item.name" placement="top-start" :max-width="400">
                                    <div class="project-name" :title="item.name">{{handleProIndex(key)}}. <span class="icon-name">{{item.name}}</span>
                                        <img class="thumbnails" :src="item.path" @click='showBigIconBtn(item.path)' />
                                    </div>
                                </Tooltip>
                            </div>
                            <div class="btn-icon-wrap">
                                <img :src="setImgSrc(item)" class="click-icon" alt="modify" title="修改" :style='setIsClick(item)' @click="modifyIcon(item)">
                                <Poptip
                                    transfer confirm title="确定要删除吗？" placement="left"
                                    @on-ok="delIcon(item.id)" :style='setIsClick(item)'>
                                    <img :src="setDelImgSrc(item)" class="click-icon" alt="Del" title="删除">
                                </Poptip>
                            </div>
                        </div>
                        <div class="project-other-info">
                            <p  style="margin-right:8px;" class="display-flex">
                                <span>创建者：</span>
                                <Tooltip :content="item.creatorName" placement="top-start" :max-width="400">
                                    <span style="width: 100px;" class="text-ellipsis">{{item.creatorName}}</span>
                                </Tooltip>
                            </p>
                            <p  style="margin-right:30px;">
                                <span>创建时间：</span>
                                <span>{{item.created}}</span>
                            </p>
                            <p  style="margin-right:30px;">
                                <span>可见范围：</span>
                                <span :style="{color:setVisibility(item.visibility).color}">{{setVisibility(item.visibility).text}}</span>
                            </p>
                            <p style="margin-right:8px;" v-if="distributed">
										<span>上报状态：</span>
										<Tooltip :disabled="!['0', '1'].includes(item.reportedStatus)" :content="item.reportedMsg" placement="top" max-width='600' transfer-class-name='forTooltip' transfer>
											<span class="target-status-text" 
												:style="{color: ['0', '1'].includes(item.reportedStatus) ? '#ed4014' : item.reportedStatus === '2' ?'#19be6b':'grey'}">
												{{['0', '1'].includes(item.reportedStatus) ? '上报失败' : item.reportedStatus === '2' ?'上报成功':'未上报'}}</span>
										</Tooltip>
									</p>
                        </div>
                    </div>
                </div>
                <div style="display: flex;justify-content: center;margin: 15px 0">
                    <Page :total=iconTotal :page-size="iconPageSize" :current="iconPage" show-total show-elevator @on-change="iconOnChange"/>
                </div>
            </div> -->
      <div class="table-wrap">
        <template v-if="iconList.length > 0">
          <div
            v-show="iconList.length > 0"
            class="exper-wrap"
            v-for="(item, key) in iconList"
            :key="key"
            :style="{
              marginRight: (key + 1) % spanNum == 0 ? 0 : marginRight,
              width: setExperWid,
              height: setExperHie
            }"
            @mouseleave="hideDelPop"
          >
            <!--<div>-->
            <div class="image-box">
              <img class="exper-img" :src="item.path" @error="setDefImg" />
              <!--<p class="out-play-icon">
                                <img src="../../assets/exper/play.png" alt='播放' @click="playVideo(item)" class="exper-icon" style="width:30px">
                            </p>-->
              <div class="img-mask">
                <div class="exper-top">
                  <div class="exper-left">
                    <div class="exper-name" :title="item.name">{{ item.name }}</div>
                    <div class="exper-info">
                      <p class="spaceBetween">
                        <small class="exper-user" :title="item.creatorName"
                          >创建者：{{ item.creatorName }}</small
                        >
                      </p>
                      <p class="spaceBetween">
                        <small class="exper-time"> 时间：{{ showTimeNotSecond(item.created) }}</small>
                      </p>
                      <p class="spaceBetween">
                        <small
                          class="exper-type"
                          style="margin-right:5px;"
                          :title="setType(item.type).color"
                        >
                          类型：{{ setType(item.type).text }}</small
                        >
                      </p>
                      <p class="spaceBetween">
                        <small
                          class="exper-type"
                          style="margin-right:5px;"
                          :style="{ color: setVisibility(item.visibility).color }"
                        >
                          可见范围：{{ setVisibility(item.visibility).text }}</small
                        >
                      </p>
                      <p style="spaceBetween" v-if="distributed">
                        <small
                          :style="{
                            color: ['0', '1'].includes(item.reportedStatus)
                              ? '#ed4014'
                              : item.reportedStatus === '2'
                              ? '#19be6b'
                              : 'grey'
                          }"
                        >
                          上报状态：{{
                            ['0', '1'].includes(item.reportedStatus)
                              ? '上报失败'
                              : item.reportedStatus === '2'
                              ? '上报成功'
                              : '未上报'
                          }}</small
                        >
                      </p>
                    </div>
                    <div class="oper-btn" @click.stop="cancel">
                      <Button
                        class="exper-btn"
                        @click.stop="modifyIcon(item)"
                        size="small"
                        v-if="mainRangeflag"
                        :disabled="item.visibility == 'public'"
                        >修改</Button
                      >
                      <div>
                        <Button
                          class="exper-btn"
                          @click.stop="showBigIconBtn(item.path,item.type)"
                          size="small"
                        
                          >预览</Button
                        >
                        <!-- <Poptip
                          class="too"
                          popper-class="tooltipclass"
                          theme="dark"
                          placement="top"
                          :transfer="true"
                          trigger="hover"
                        >
                          <Icon type="ios-alert" class="ios-alert" />
                          <div class="api" slot="content">
                            <p style="white-space: normal;">3D模型不支持预览</p>
                          </div>
                        </Poptip> -->
                      </div>
                      <Poptip
                        v-model="hideDel"
                        confirm
                        title="确定要删除这个图标吗？"
                        @on-ok="delIcon(item.id)"
                      >
                        <Button class="exper-btn" size="small" :disabled="item.visibility == 'public'"
                          >删除</Button
                        >
                      </Poptip>
                    </div>
                  </div>
                  <div class="exper-right">
                    <p class="spaceBetween exper-count" style="width:100%;height:50%"></p>
                    <div
                      style="margin-right:8px;width: 20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
                      v-if="distributed"
                    >
                      <Checkbox
                        v-model="item._checked"
                        @on-change="checkSingleQuestion($event, item)"
                      ></Checkbox>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="display: flex;justify-content: center;margin: 15px 0">
            <Page
              :total="iconTotal"
              :page-size="iconPageSize"
              :current="iconPage"
              show-total
              show-elevator
              @on-change="iconOnChange"
            />
          </div>
        </template>
        <NoData :loading="iconListLoading" v-else></NoData>
      </div>
    </template>
    <!-- 查看icon -->
    <Modal v-model="bigIconModal" :footer-hide="true" width="1000">
      <div class="modal-img-wrap">
        <img :src="showIconSrc" alt="icon" style="width:auto;height:auto;" />
      </div>
    </Modal>
  </MenuPage>
</template>

<script>
import defaultImg from '@/assets/globalIcon/course.jpg';
import $ from 'jquery';
import encryption from '@/libs/encryption.js';
import { getIconData, delIcon } from '@/api/icon.js';
import { reportedIcons, getRangeAll } from '@/api/reported-data';
import resourcesReportedMixin from '@/mixin/resources-reported-mixin';
import { debounce,showTimeNotSecond } from '@/libs/utils';
import pageTitle from '@/mixin/pageTitle';
export default {
  components: {},
  mixins: [resourcesReportedMixin,pageTitle],
  data() {
    return {
      showTimeNotSecond,
      mainRangeflag: true,
      mainRange: '',
      rangeAllList: [],
      selectAllIcon: false,
      selectIcons: [],
      //分布式主靶场
      // distributedRange:false,
      // 用户信息
      USER_ID: '',
      isRootDesigner: '',
      distributed: false,
      defaultImg, // 课件的默认图片
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      contentHei: 'auto',
      setTableHei: 'auto',
      spanNum: 4,
      getWidth: 0,
      marginLeft: 'auto',
      marginRight: 'auto',
      setExperHie: '0',
      setExperWid: 'auto',
      setImgHei: '145px',
      hideDel: false,
      // 数据
      iconList: [],
      iconPage: 1,
      iconPageSize: 10,
      iconTotal: 0,
      selectIconType: '',
      iconType: '',
      rangeId: '',
      creatByMeModal: '',
      searchIconName: '',
      iconListLoading: false,
      iconModelInput: '',
      // 新列表
      showDataList: true,
      showDefImg: false,
      // 查看icon
      bigIconModal: false,
      showIconSrc: ''
    };
  },
  created() {
    // 获取用户id
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isRootDesigner = November.isRootDesigner;
    this.distributed = November.distributed;

    // this.distributedRange = this.$store.state.user.distributedRange
  },
  mounted() {
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
    //赋值查询条件
    let queryObj = sessionStorage.getItem('queryObj');
    if (queryObj) {
      let params = JSON.parse(queryObj);
      this.iconPage = params.pageIndex;
      this.iconPageSize = params.pageSize;
      this.selectIconType = params.visibility;
      this.iconType = params.type;
      this.rangeId = params.rangeId;
      this.searchIconName = params.name;
      this.creatByMeModal = params.self;
      sessionStorage.removeItem('queryObj');
    }
    this.getIconList();
    this.queryAllRange();
  },
  computed: {
    distributedRange() {
      return this.$store.state.user.distributedRange;
    }
  },
  methods: {
    setDefImg() {
      let img = event.srcElement;
      img.src = this.defaultImg;
      img.onerror = null;
    },
    // logo
    handleImage(logo) {
      let src = '';
      if (logo) {
        if (logo.indexOf('Learn') > -1) {
          src = logo;
        } else {
          src = `/Learn/${logo}`;
        }
      } else {
        src = this.defaultImg;
      }
      return src;
    },
    hideDelPop() {
      this.hideDel = false;
    },
    // 设置高度
    // 设置高度
    setStyle: debounce(function() {
      let _this = this;
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
      this.contentHei = this.fullHeight - 60 + 'px'; // 80是头部高度  60是上下padding
      this.contentWid = this.fullWidth - 200 - 100; // 200是菜单栏宽度  100是左右padding
      this.setTableHei = this.fullHeight - 60 - 52 - 49 - this.queryHeight + 'px';
      let xishu = 0;
      if (this.fullWidth <= 1400) {
        this.spanNum = 3;
        this.iconPageSize = 6;
        xishu = 0.12;
      }
      if (this.fullWidth > 1400 && this.fullWidth <= 1920) {
        this.spanNum = 4;
        this.iconPageSize = 16;
        xishu = 0.12;
      }
      if (this.fullWidth > 1920) {
        this.spanNum = 5;
        this.iconPageSize = 20;
        xishu = 0.1;
      }
      this.marginRight = '2%';
      let experAvailableWidth = 1 - 0.02 * (this.spanNum - 1);
      let experWid = (100 - 2 * (this.spanNum - 1)) / this.spanNum;
      this.setExperWid = experWid + '%';
      this.setExperHie = this.contentWid * (experWid / 100) * 0.58 + 'px';
      if (
        this.expSceneTotal > 0 &&
        this.queryVideoInfo.pageIndex > Math.floor(this.expSceneTotal / this.iconPageSize)
      ) {
        this.queryVideoInfo.pageIndex =
          this.expSceneTotal / this.iconPageSize < 1
            ? 1
            : Math.floor(this.expSceneTotal / this.iconPageSize) + 1;
      }
      this.getIconList();
    }, 1000),
    updateTableHei() {
      setTimeout(() => {
        this.queryHeight = document.querySelector('.filter-wrap').offsetHeight;
        this.setTableHei = this.fullHeight - 60 - 52 - 49 - this.queryHeight + 'px';
      }, 600);
    },
    // ICON列表
    getIconList: debounce(function() {
      let query = {
        pageIndex: this.iconPage,
        pageSize: this.iconPageSize
      };
      let iconDto = {
        type: this.iconType,
        visibility: this.selectIconType,
        name: this.searchIconName,
        self: this.creatByMeModal == true ? 1 : 0,
        rangeId: this.rangeId
      };
      let params = {
        type: this.iconType,
        pageIndex: this.iconPage,
        pageSize: this.iconPageSize,
        visibility: this.selectIconType,
        rangeId: this.rangeId,
        name: this.searchIconName,
        self: this.creatByMeModal
      };
      this.queryObj = JSON.stringify(params);
      getIconData(iconDto, query)
        .then(async (res) => {
          if (res.data.code == 1) {
            let pageList = res.data.data;
            await this.getReportedStatus_mixins(pageList.items).then();
            this.iconTotal = parseInt(pageList.total);
            this.iconList = pageList.items;
            if (pageList.items && pageList.items.length) {
              let questionIds = this.selectIcons.map((icon) => icon.id);
              let checkedNum = 0;
              this.iconList.forEach((icon) => {
                if (questionIds.includes(icon.id)) {
                  this.$set(icon, '_checked', true);
                  checkedNum++;
                } else {
                  this.$set(icon, '_checked', false);
                }
              });
              if (checkedNum && this.iconList.length === checkedNum) {
                this.selectAllIcon = true;
              } else {
                this.selectAllIcon = false;
              }
            }
            this.setMainOrBranch(); //设置分靶场隐藏 修改删除按钮
          } else {
            this.iconList = [];
            this.iconTotal = 0;
          }
          this.iconListLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    }, 500),
    iconOnChange(val) {
      this.iconPage = val;
      this.getIconList();
    },
    selectIconTypeChange(val) {
      this.iconPage = 1;
      this.selectIconType = val;
      this.getIconList();
    },
    IconTypeChange(val) {
      this.iconPage = 1;
      this.iconType = val;
      this.getIconList();
    },
    searchCreatedByMe(val) {
      this.iconPage = 1;
      this.getIconList();
    },
    searchIconNameBtn() {
      this.iconPage = 1;
      this.searchIconName = $.trim(this.iconModelInput);
      this.getIconList();
    },
    // 添加ICON
    addIconModal() {
      this.$router.push({
        name: 'creatIcon',
        query: {
          page: this.iconPage,
          action: 'create'
        }
      });
    },
    // 修改ICON
    modifyIcon(row) {
      sessionStorage.setItem('queryObj', this.queryObj);
      this.$router.push({
        name: 'creatIcon',
        query: {
          id: row.id,
          page: this.iconPage,
          action: 'modify'
        }
      });
    },
    // 删除
    delIcon(id) {
      delIcon(id)
        .then((res) => {
          if (res.data.code == 1) {
            this.$Message.success({
              content: '删除成功！',
              duration: 3
            });
            this.iconPage =
              this.iconPage > 1 && this.iconList.length === 1 ? this.iconPage - 1 : this.iconPage;
            this.getIconList();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 刷新icon
    refreshIcon() {
      this.iconPage = 1;
      this.searchIconName = '';
      this.iconModelInput = '';
      this.selectIconType = '';
      this.iconType = '';
      this.rangeId = '';
      this.creatByMeModal = false;
      this.getIconList();
    },
    // 计算index
    handleProIndex(key) {
      return (this.iconPage - 1) * this.iconPageSize + key + 1;
    },
    setType(val) {
      let obj = {};
      let text = '';
      let color = '';
      if (val === 'Covertitle') {
        text = '封面';
        color = '#32CD32';
      } else if (val === '3DModel') {
        text = '3D模型';
        color = '#FFA500';
      } else if (val === 'HEAD') {
        text = '头像';
        color = '#4169E1';
      } else if (val === 'logo') {
        text = 'LOGO';
        color = '#4169E1';
      } else if (val === 'other') {
        text = '其他';
        color = '#4169E1';
      }
      obj.text = text;
      obj.color = color;
      return obj;
    },
    // 设置可见范围
    setVisibility(val) {
      let obj = {};
      let text = '';
      let color = '';
      if (val === 'share') {
        text = '单位';
        color = '#32CD32';
      } else if (val === 'private') {
        text = '个人';
        color = '#FFA500';
      } else if (val === 'public') {
        text = '系统';
        color = '#4169E1';
      }
      obj.text = text;
      obj.color = color;
      return obj;
    },
    // 设置知否可点击
    setIsClick(item) {
      if (item.isshare === 'public' || (item.creator !== this.USER_ID && !this.isRootDesigner)) {
        return { 'pointer-events': 'none' };
      }
    },
    setImgSrc(item) {
      if (item.isshare === 'public' || (item.creator !== this.USER_ID && !this.isRootDesigner)) {
        return require('../../assets/project/modifys.png');
      } else {
        return require('../../assets/project/modifys-h.png');
      }
    },
    setDelImgSrc(item) {
      if (item.isshare === 'public' || (item.creator !== this.USER_ID && !this.isRootDesigner)) {
        return require('../../assets/project/delNote-d.png');
      } else {
        return require('../../assets/project/delNote-h.png');
      }
    },
    //  查看icon
    showBigIconBtn(url,type) {
      if(type=='3DModel'){
        const { href } = this.$router.resolve({
                name: 'icon3d',
                query: {
                    url: url,
                },
            });
            window.openTrain(href, '_blank');
      }else{
        this.showIconSrc = url;
        this.bigIconModal = true;
      }
      console.log(url);
    },
    //选择导出图标
    handleCheckIcon(e) {
      this.selectAllIcon = e;
      this.iconList.forEach((icon) => {
        this.checkSingleQuestion(e, icon);
      });
    },
    checkSingleQuestion(e, icon) {
      if (e && !this.selectIcons.map((icon) => icon.id).includes(icon.id)) {
        this.selectIcons.push(icon);
      } else if (!e && this.selectIcons.map((icon) => icon.id).includes(icon.id)) {
        let index = this.selectIcons.findIndex((item) => icon.id == item.id);
        this.selectIcons.splice(index, 1);
      }
      let checkudQuestion = this.iconList.find((item) => item.id == icon.id);
      if (checkudQuestion) {
        this.$set(checkudQuestion, '_checked', e);
      }
      if (this.iconList.length > 0 && this.iconList.every((icon) => icon._checked === true)) {
        this.selectAllIcon = true;
      } else {
        this.selectAllIcon = false;
      }
    },
    // 上报图标
    reportedIcons() {
      if (this.selectIcons.length == 0) {
        this.$Message.warning('请选择图标');
        return;
      }
      let iconIdS = [];
      this.selectIcons.forEach((question) => {
        iconIdS.push(question.id);
      });
      reportedIcons(iconIdS)
        .then(({ code, message }) => {
          if (code !== 1) {
            this.$Message.warning(message);
            return;
          }
          this.$Message.info('上报图标成功');
          this.getIconList();
          this.selectIcons = [];
          this.selectAllIcon = false;
          this.iconList.forEach((item) => this.$set(item, '_checked', false));
        })
        .catch(() => {
          this.$Message.error('上报图标异常');
        });
    },
    //查询所有分靶场信息
    queryAllRange() {
      getRangeAll().then((res) => {
        if (res.code === 1) {
          let mainRange = res.data.items.find((item) => {
            return item.level== 'LOCAL';
          });
          this.mainRange = mainRange.name || '选择靶场';
          this.rangeAllList = res.data.items;
        }
      });
    },
    searchItem() {
      this.getIconList();
    },
    setMainOrBranch() {
      let res = this.rangeAllList.find((item) => {
        return item.id == this.rangeId;
      });
      if (res && res.level != 'LOCAL') {
        this.mainRangeflag = false; // 分靶场
      } else {
        this.mainRangeflag = true; // 主靶场
      }
    },
    cancel() {}
  }
};
</script>
<style scoped>
.project-status-text {
  font-weight: 600;
  font-size: 14px;
  margin-left: 10px;
  display: flex;
  justify-content: flex-start;
}
.btn-icon-wrap {
  display: flex;
  justify-content: flex-end;
}
.click-icon {
  cursor: pointer;
  height: 22px;
  margin-left: 20px;
}
.project-other-info {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
  color: rgba(51, 51, 51, 0.4);
  font-weight: bold;
}
.sendMsgContent {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: calc(100vh - 300px);
}
.thumbnails {
  display: inline-block;
  max-height: 30px;
  width: auto;
  margin-left: 20px;
  vertical-align: middle;
  cursor: zoom-in;
}
.modal-img-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
}
</style>
<style scoped>
.table-wrap {
  flex:auto;
  /* margin-top: 20px; */
  /* padding: 0 20px; */
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  /*display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;*/
}
.exper-wrap {
  margin-bottom: 15px;
  position: relative;
  /*height: 250px;*/
  /* cursor: pointer; */
  display: inline-block;
  font-size: 14px;
  overflow: hidden;
  box-shadow: 0 0 2px #ccc;
  border-radius: 3px;
  overflow: hidden;
}

.exper-wrap:hover {
  box-shadow: 0 0 5px #472c89;
}
/*.exper-wrap:hover .out-play-icon{
    	display: none;
    }*/

.exper-wrap:hover .img-mask {
  top: 0;
}

.exper-wrap:hover .img-mask .exper-bottom {
  display: none;
}

.exper-wrap:hover .img-mask .exper-top {
  display: flex;
}
/*.exper-wrap:hover .img-mask .exper-bottom-name{
    	visibility: hidden;
    }*/

.exper-avtar {
  height: 13px;
  width: 11px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 5px;
  margin-top: -3px;
}

.exper-bottom-name {
  max-width: 50%;
  white-space: pre;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exper-icon {
  /*height: 13px;
        width: 11px;*/
  vertical-align: text-bottom;
  /*margin-right: 5px;*/
  /*display: inline-block;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: -3px;*/
}
/*.out-play-icon{
    	position: absolute;
	    height: 78%;
	    top: 0;
	    left: 0;
	    right: 0;
	    display: flex;
	    justify-content: center;
	    align-items: center;
    }*/

.exper-count {
  font-weight: bold;
}

.spaceBetween {
  display: flex;
  justify-content: space-between;
}

.time-icon {
  height: 11px;
  width: 11px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 5px;
  margin-top: -2px;
}

.exper-img {
  display: block;
  width: 100%;
  height: 100%;
  /*height: 145px;*/
  /*border-radius: 6px 6px 0px 0px;*/
}

.oper-btn {
  position: absolute;
  bottom: 0;
  width: calc(100% - 20px);
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  transition: all ease-in-out 0.5s;
}

.exper-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  font-weight: bold;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
}

.exper-user {
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.exper-time,
.exper-type {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.exper-time {
  max-width: 100%;
}
.exper-type {
  max-width: 50%;
}

.image-box {
  position: relative;
  height: 100%;
}

.exper-top {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
}

.exper-left {
  position: relative;
  width: 70%;
  height: 80%;
  background: var(--imagecard-mask-bgcolor);
  padding: 10px;
  /* font-size: 12px; */
  border-radius: 3px;
  min-height: 164px;
  /*overflow: hidden;*/
}

.exper-right {
  width: 35%;
  height: 75%;
  margin-left: 4%;
  color: #fff;
  visibility: hide;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: center;
}

.exper-bottom {
  width: 100%;
  height: 20%;
  align-items: center;
  color: var(--imagecard-botton-title-color);
  /*padding: 0 10px;*/
}

.img-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  /*opacity: 0;*/
  background-color: rgba(0,0,0,.4);
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s ease-in-out;
  align-items: flex-start;
}

.exper-info {
  color: #8d95a6;
}

.exper-btn {
  border-color: #8d95a6;
  color: #8d95a6;
}
</style>
